<template>
  <div class="wrap">
    <nav-bar :title="cateTitle">
      <img src="/img/47.png" slot="screen" class="nav-right" @click="$router.push({name:'search'})"/>
    </nav-bar>
    <div class="page">
      <side-menu v-model="slider_active" :sideMenuList="sideMenuList"></side-menu>
      <tabs v-model="sub_active" :tabsList="tabsList" class="tabs">
        <img src="/img/bg.png" slot="tabItem" class="cate_poster">        
        <product-item-long class="goodsItem" slot="tabItem" v-for="(vo, index) in list" :key="'pro_'+index" :product="vo"></product-item-long>
      </tabs>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import sideMenu from "@/components/side-menu";
import tabs from "@/components/tabs";
import productItemLong from "@/components/product-item-long";
export default {
  name: "cate",
  data() {
    return {
      cateTitle: "分类",
      slider_active: 0,
      sub_active: 0,
      sideMenuList: [],
      product: {
        desc: "描述信息",
        title: "商品标题",
        price: 20,
        img: "/img/30.png",
        tagsInfo: "2件8折"
      },
      list: [],
      page: 0,
    };
  },
  mounted(){
    this.getCates()
  },
  computed: {
    tabsList(){
      var item = this.sideMenuList[this.slider_active]
      if(!item || !item.tmenu) return []
      var arr = []
      for (let index = 0; index < item.tmenu.length; index++) {
        const element = item.tmenu[index];
        arr.push({
          id: element.id,
          title: element.name,
        })
      }
      return arr
    },
    cateId(){
      var item = this.sideMenuList[this.slider_active]
      if(!item) return 0;
      if(!item.tmenu) {
        return item.id
      }
      var sub = item.tmenu[this.sub_active]
      if(!sub) {
        return item.id
      }
      return sub.id
    }
  },
  watch:{
    cateId(){
      this.page = 0
      this.list = []
      this.getGoods()
    }
  },
  methods: {
    getCates(){
      this.$store.dispatch('goodsCate', {}).then(res=>{
        var cates = res.data.result
        var arr = []
        for (const key in cates) {
          if (cates.hasOwnProperty(key)) {
            const element = cates[key];
            arr.push({
              id: key,
              title: element.name,
              tmenu: element.tmenu
            })
          }
        }
        console.log(arr)
        this.sideMenuList = arr
      }).catch(err => {
        console.log('err', err)
      })
    },
    getGoods(){
      this.$store.dispatch('goodsList', {
        id: this.cateId,
        type: 0,
        p: this.page + 1
      }).then(res => {
        this.list = this.list.concat(res.data.result.goods_list)
      }).catch(err => {

      })
    },
    parseGoods(vo){
      console.log(vo)
      return {
        goods_id: vo.goods_id,
        desc: vo.goods_remark,
        title: vo.goods_name,
        price: vo.shop_price,
        img: vo.original_img || "/img/30.png",
        tagsInfo: "" // 活动
      }
    }
  },
  components: {
    navBar,
    sideMenu,
    tabs,
    productItemLong
  }
};
</script>
<style lang="less" scope>
.wrap {
  height: 100%;
  width: 100%;
}
.nav-right {
  height: 20px;
  width: 20px;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  .cate_poster{
    width: 270px;
    height: 112px;
    object-fit: cover;
    margin: 5px auto;
    display: -webkit-box;
  }
  .tabs {
    width: 100%;
    height: 45px;
    background-color: #fff;
    .goodsItem{
      width: 270px;
    }
    .van-tabs__line {
      background-color: #fff;
    }

    .van-tab {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &.van-tab--active {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 124, 157, 1);
      }
    }
  }
}
</style>


